<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="../static/diancan/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="../static/diancan/css/style.css">
<link rel="stylesheet" type="text/css" href="../static/diancan/css/index.css">
</head>

<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../static/diancan/images/index/shop_1.jpg"></div>
        <div class="swiper-slide"><img src="../static/diancan/images/index/shop_1.jpg"></div>
        <div class="swiper-slide"><img src="../static/diancan/images/index/shop_1.jpg"></div>
    </div>
</div>

<div class="nav-lf">
<ul id="nav">
  <li class="current"><a href="#st1">菜品1 One</a><b></b></li>
  <li><a href="#st2">菜品2 Two</a><b>1</b></li>
  <li><a href="#st3">菜品3 Three</a><b>3</b></li>
  <li><a href="#st4">菜品4 Four</a><b>6</b></li>
</ul>
</div>

<div id="container" class="container">

  <div class="section" id="st1">
      {% for a in obj1 %}
  	<div class="prt-lt" value={{ a.id }}>
    	<div class="lt-lt"><img src="{{a.img}}"></div>
        <div class="lt-ct">
            <p class=pp> <span class="pro">{{a.pro}}</span> <span class="en_pro">{{a.en_pro}}</span></p>
            <p class="pr">¥<span class="price">{{a.price}}</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>

    </div>
      {% endfor %}


  </div>

  <div class="section" id="st2">
    {% for b in obj2 %}
  	<div class="prt-lt" value={{ b.id }}>
    	<div class="lt-lt"><img src="{{b.img}}"></div>
        <div class="lt-ct">
            <p class=pp> <span class="pro">{{b.pro}}</span> <span class="en_pro">{{b.en_pro}}</span></p>
            <p class="pr">¥<span class="price">{{b.price}}</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>
    </div>
     {% endfor %}



  </div>

  <div class="section" id="st3">
    {% for c in obj3 %}
  	<div class="prt-lt" value={{ c.id }}>
    	<div class="lt-lt"><img src="{{c.img}}"></div>
        <div class="lt-ct">
            <p class=pp> <span class="pro">{{c.pro}}</span> <span class="en_pro">{{c.en_pro}}</span></p>
            <p class="pr">¥<span class="price">{{c.price}}</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>
    </div>
    {% endfor %}

  </div>

  <div class="section" id="st4">
    {% for d in obj4 %}
  	<div class="prt-lt" value={{ d.id }}>
    	<div class="lt-lt"><img src="{{d.img}}"></div>
        <div class="lt-ct">
            <p class=pp> <span class="pro">{{d.pro}}</span> <span class="en_pro">{{d.en_pro}}</span></p>
            <p class="pr">¥<span class="price">{{d.price}}</span></p>
        </div>
        <div class="lt-rt">
        	<input type="button" class="minus"  value="-">
        	<input type="text" class="result" value="0">
        	<input type="button" class="add" value="+">
        </div>
    </div>
    {% endfor %}
  </div>

</div>
</div>



<footer>
	<div class="ft-lt">
        <p>TOTAL:<span id="total" class="total">00.00元</span><span class="nm">(<label class="share"></label>)</span></p>
    </div>
    <div class="ft-rt">
        <p><a id="luck" onclick="myFunction()">Luck Draw</a></p>


    </div>
</footer>


<script type="text/javascript" src="../static/diancan/js/Adaptive.js"></script>
<script type="text/javascript" src="../static/diancan/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../static/diancan/js/swiper.min.js"></script>
<script type="text/javascript" src="../static/diancan/js/jquery.nav.js"></script>


<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
	pagination: '.swiper-pagination',
	paginationClickable: true,
	spaceBetween: 30,
});

$(function(){
	$('#nav').onePageNav();
});

</script>
<script>
$(function(){
    //加
$(".add").click(function(){
var t=$(this).parent().find('input[class*=result]');
t.val(parseInt(t.val())+1);
setTotal();
})
    //减
$(".minus").click(function(){
var t=$(this).parent().find('input[class*=result]');
t.val(parseInt(t.val())-1);
if(parseInt(t.val())<0){
t.val(0);
}
setTotal();
})

function setTotal(){
 s=0;
var v=0;
var n=0;

<!--计算总额-->
$(".lt-rt").each(function(){
s+=parseInt($(this).find('input[class*=result]').val())*parseFloat($(this).siblings().find('span[class*=price]').text());
//选的个数
 result=$(this).find('input[class*=result]').val();
    //选的菜品价格
 price=$(this).prev().find('span[class*=price]').text();
    //选的菜品
 pro=$(this).prev().find('.pro').text();
    //单菜小计
 sum=parseInt($(this).find('input[class*=result]').val())*parseFloat($(this).siblings().find('span[class*=price]').text());

});

<!--计算菜种-->
var nIn = $("li.current a").attr("href");
$(nIn+" input[type='text']").each(function() {
	if($(this).val()!=0){
		n++;
	}
});

<!--计算总份数-->
$("input[type='text']").each(function(){
	v += parseInt($(this).val());
});
if(n>0){
	$(".current b").html(n).show();
	}else{
	$(".current b").hide();
		}
$(".share").html(v);
$("#total").html(s.toFixed(2));
}
setTotal();
})


function myFunction() {

    var data = [];

    $(".lt-rt").each(function() {
        var id = $(this).parent(".prt-lt").attr("value");
        var num = $(this).find('input[class*=result]').val();

        if (num > 0) {
           data.push(JSON.stringify({"id" : id, "num" : num}));
        }

        //var p_result=$(this).find('input[class*=result]').val();
        //选的菜品价格
        //var p_price=$(this).prev().find('span[class*=price]').text();
        //选的菜品中文名
        //var p_pro=$(this).prev().find('.pro').text();
        //选的菜品英文名
        //var p_en_pro=$(this).prev().find('.en_pro').text();
        //单菜小计
        //var p_sum=parseInt($(this).find('input[class*=result]').val())*parseFloat($(this).siblings().find('span[class*=price]').text())
    })

    if (data.length > 0) {
        $.ajax({
            url: "/ajax/",
            type: "POST",
            tradition:true,
            dataType: 'json',
            data: {data : data},
            // 返回的数据会到DATA
            success: function (data) {
                // 判断 data 传过来的值
                if (data.result == 0) {
                    window.location.href = "/choujiang/?id=" + data.id;
                } else {
                    alert(data.msg);
                }
            }
        })
    }
}


</script>


<script type="text/javascript" src="../static/diancan/js/waypoints.min.js"></script>
<script type="text/javascript" src="../static/diancan/js/navbar2.js"></script>
</body>
</html>
